import { useMemo } from 'react';
import { Button, Card, Divider, Form, Input, Space } from 'antd';
import FormPro, { type ItemConfigType } from '@/components/FormPro';

const FormProView = () => {
	const [form] = Form.useForm();
	const [testForm] = Form.useForm();

	const config = useMemo<ItemConfigType>(
		() => [
			[
				{ type: 'input', name: 'title', label: '标题' },
				{ type: 'select', name: 'age', label: '年龄' },
				<Form.Item key="aaa" label="ceshi">
					<Space>
						<Form.Item name="aaa" noStyle>
							<Input />
						</Form.Item>
						<Form.Item name="bbb" noStyle>
							<Input />
						</Form.Item>
					</Space>
				</Form.Item>
			],
			[
				{
					type: 'select',
					name: 'sex',
					label: '性别',
					options: [
						{ value: 0, label: '未知' },
						{ value: 1, label: '男' },
						{ value: 2, label: '女' }
					]
				},
				{
					type: 'date-picker',
					name: 'date',
					label: '期日'
				}
			]
		],
		[]
	);

	return (
		<Card>
			<FormPro form={form} labelWidth={80} config={config} />
			<Button
				type="primary"
				onClick={() => {
					const value = form.getFieldsValue();
					console.log(value);
				}}
			>
				提交
			</Button>
			<Divider />
			<Form form={testForm}>
				<Form.Item label="验证" name="num">
					<Input placeholder="请输入数字" onChange={(e) => 0} />
				</Form.Item>
			</Form>
			<Button type="primary" ghost>
				测试
			</Button>
		</Card>
	);
};

export default FormProView;
